<template>
    <div id="corporate-behavior">
        <div id="header-content">
            <el-form label-width="70px" ref="queryForm" :model="searchParam">
                <el-row>
                    <el-col :span="5">
                        <el-form-item label="证券类型:" prop="stockType">
                            <el-tooltip
                                class="item"
                                effect="dark"
                                :content="calcStockType"
                                :disabled="!searchParam.stockType.length"
                                placement="bottom"
                            >
                                <el-select
                                    v-model="searchParam.stockType"
                                    @change="handleStockTypeChange"
                                    multiple
                                    collapse-tags
                                    size="mini"
                                    style="width: 90%"
                                >
                                    <el-option label="全部" value="-1" :disabled="isDisAll"></el-option>
                                    <el-option v-for="item in stockTypes" :key="item.value" :label="item.label" :value="item.value" :disabled="isDis">
                                    </el-option>
                                </el-select>
                            </el-tooltip>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="证券代码:" prop="cinsideAppraise">
                            <el-select
                                v-model="searchParam.stockCode"
                                filterable
                                clearable
                                remote
                                :remote-method="getBondCodeList"
                                @visible-change="handleBondCodeVisibleChange"
                                @clear="getBondCodeList('')"
                                :loading="selectLoading"
                                size="mini"
                                style="width: 90%"
                            >
                                <el-option
                                    v-for="item in stockSelectData"
                                    :key="item.dictKey"
                                    :label="item.dictKey + ' ' + (item.dictKeyName || '')"
                                    :value="item.dictKey"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="消息类型:" prop="reminderName">
                            <el-select v-model="searchParam.reminderName" clearable filterable size="mini" style="width: 90%">
                                <el-option v-for="(item, index) in reminderNameStorage" :key="index" :label="item" :value="item"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="公告日期:" prop="publishDate">
                            <el-date-picker
                                v-model="searchParam.publishDates"
                                type="daterange"
                                align="right"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                format="yyyy-MM-dd"
                                value-format="yyyyMMdd"
                                @change="handleDateChange"
                                style="width: 120%"
                                size="mini"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4" style="display: block">
                        <div style="float: right">
                            <el-button type="primary" size="mini" @click="handleButton('search')">查询</el-button>
                            <el-button type="primary" size="mini" @click="handleButton('reset')">重置</el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div id="main-content">
            <div class="content-table">
                <el-table
                    auto-resize
                    resizable
                    stripe
                    :row-style="{ height: '35px' }"
                    :header-row-style="{ height: '40px' }"
                    :cell-style="{ padding: '0px', borderColor: '#d7d7d7' }"
                    :header-cell-style="{ borderColor: '#d7d7d7', 'text-align': 'center', background: '#e8f3ff' }"
                    border
                    v-loading="tableLoading"
                    element-loading-text="加载中"
                    size="mini"
                    height="100%"
                    style="cursor: pointer; width: 100%"
                    highlight-current-row
                    highlight-hover-row
                    :data="dataSource"
                    :default-sort="{ prop: sortProp, order: sortOrder }"
                    @sort-change="handleSortChange"
                >
                    <el-table-column prop="stockCode" label="证券代码" width="120" show-overflow-tooltip :formatter="getValueIs" sortable="custom">
                    </el-table-column>
                    <el-table-column prop="stockName" label="证券名称" width="150" show-overflow-tooltip :formatter="getValueIs" sortable="custom">
                    </el-table-column>
                    <el-table-column prop="reminderName" label="消息类型" width="150" show-overflow-tooltip :formatter="getValueIs" sortable="custom">
                    </el-table-column>
                    <el-table-column prop="reminderMemo" label="消息内容" show-overflow-tooltip :formatter="getValueIs" sortable="custom">
                    </el-table-column>
                    <el-table-column prop="reminderDate" label="提醒日期" width="120" show-overflow-tooltip sortable="custom">
                        <template slot-scope="scope">
                            {{ dateFormat(scope.row['reminderDate']) || '--' }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="publishDate" label="公告日期" width="120" show-overflow-tooltip sortable="custom">
                        <template slot-scope="scope">
                            {{ dateFormat(scope.row['publishDate']) || '--' }}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <risk-pagination :paging="pages" @page-change="getCompanyList"></risk-pagination>
        </div>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator';
import RiskPagination from '@/common/components/risk-pagination.vue';
import { thousandsFormat, dateFormat } from '@/utils/tools';
import XEUtils from 'xe-utils';

export interface pages {
    total?: number;
    pageSize?: number;
    currentPage?: number;
}
@Component({
    name: 'BankInformation',
    components: {
        RiskPagination,
    },
})
export default class BankInformation extends Vue {
    dateFormat = dateFormat;

    private dataSource: any[] = []; // 表数据

    private sortProp: string = ''; // 排序字段
    private sortOrder: string = ''; // 排序方式

    private selectLoading: boolean = false; // 下拉框远程搜索时的加载状态

    private tableLoading: boolean = false;

    private stockTypes: any[] = [
        { label: 'A股', value: '1' },
        { label: '港股', value: '4' },
        { label: '基金', value: '2' },
        { label: '债券', value: '3' },
    ];

    private stockTypesEnum: any = {
        '-1': '全部',
        '1': 'A股',
        '2': '基金',
        '3': '债券',
        '4': '港股',
    };
    private reminderNameStorage: any[] = [];

    private stockSelectData: any[] = [];

    private searchParam = {
        stockType: ['-1'], // 证券类型
        stockCode: '',
        reminderName: '', // 消息类型
        // publishDate: XEUtils.toDateString(new Date(), 'yyyyMMdd'), // 公告日期 默认当天
        publishDates: [XEUtils.toDateString(new Date(), 'yyyyMMdd'), XEUtils.toDateString(new Date(), 'yyyyMMdd')],
        paging: {
            pageSize: 50,
            currentPage: 1,
            total: 0,
        },
        sort: '',
        endDate: XEUtils.toDateString(new Date(), 'yyyyMMdd'), // 公告日期 默认当天,
        startDate: XEUtils.toDateString(new Date(), 'yyyyMMdd'), // 公告日期 默认当天,
    };

    private isDis: boolean = true;
    private isDisAll: boolean = false;

    private pages = { currentPage: 1, pageSize: 50, total: 0 };

    mounted() {
        this.getBondCodeList('');
        // this.getStockTypes();
        this.getReminderNames();
        this.getCompanyList();
    }

    get calcStockType() {
        let arr = [];
        this.searchParam.stockType.forEach((element) => {
            arr.push(this.stockTypesEnum[element]);
        });
        return arr.join(',');
    }

    // 获取公司行为列表
    private getCompanyList(): void {
        this.tableLoading = true;
        this.searchParam.paging.currentPage = this.pages.currentPage;
        this.searchParam.paging.pageSize = this.pages.pageSize;
        let data = JSON.parse(JSON.stringify(this.searchParam));
        data.stockType = data.stockType.join(',');
        this.$axios({ method: 'post', url: '/stockAct/list', data })
            .then((res: any) => {
                this.dataSource = res.list;
                this.searchParam.paging.total = res.total;
                this.pages.total = res.total;
                this.tableLoading = false;
            })
            .catch(() => {
                this.tableLoading = false;
            });
    }

    // 获取证券类型下拉框
    private getStockTypes(): void {
        this.$axios({ method: 'get', url: '/stockAct/listStockTypes' }).then((res: any) => {
            let arr = [];
            if (res && res.length) {
                // arr.push({ key: '-1', value: '全部' });
                res.forEach((element) => {
                    arr.push({ value: element.trim().split(' ')[0], label: element.trim().split(' ')[1] });
                });
            }
            this.stockTypes = arr;
        });
    }

    // 获取债券代码下拉框数据
    getBondCodeList(e: string) {
        this.selectLoading = true;
        let data = {
            paging: { total: 0, currentPage: 1, totalPage: 0, pageSize: 50 },
            stockType: this.searchParam.stockType.join(','),
            stockCode: e,
        };
        this.$axios({ url: '/stockAct/listStockCodes', method: 'post', data })
            .then((res: any) => {
                this.stockSelectData = res.list || [];
                this.selectLoading = false;
            })
            .catch(() => {
                this.selectLoading = false;
            });
    }

    // 获取消息类型下拉框
    private getReminderNames(): void {
        let data = {
            paging: { total: 0, currentPage: 1, totalPage: 0, pageSize: 100 },
            stockType: this.searchParam.stockType.join(','),
            stockCode: '',
        };
        this.$axios({ method: 'post', url: '/stockAct/listReminderNames', data })
            .then((res: any) => {
                this.reminderNameStorage = res.list;
            })
            .catch(() => {
                this.reminderNameStorage = [];
            });
    }

    handleBondCodeVisibleChange(val: boolean) {
        if (val && !this.stockSelectData.length) {
            this.getBondCodeList('');
        }
    }

    // 证券类型改动事件
    private handleStockTypeChange(val: any[]): void {
        let all = val.find((item) => item === '-1');
        if (val.length === 0) {
            this.isDisAll = false;
            this.isDis = false;
        } else if (all === '-1') {
            this.isDisAll = false;
            this.isDis = true;
        } else {
            this.isDisAll = true;
            this.isDis = false;
        }

        this.searchParam.stockCode = '';
        this.getBondCodeList('');
        this.getReminderNames();
    }

    // 公告日期改动事件
    private handleDateChange(val: any[]): void {
        if (val) {
            this.searchParam.startDate = val[0];
            this.searchParam.endDate = val[1];
        } else {
            this.searchParam.startDate = '';
            this.searchParam.endDate = '';
        }
    }

    // 按钮点击
    async handleButton(type: string) {
        if (type === 'search') {
            // this.searchParam.paging.currentPage = 1;
            this.pages.currentPage = 1;
            this.pages.pageSize = 50;
            this.getCompanyList();
        }
        if (type === 'reset') {
            this.searchParam = {
                stockType: ['-1'], // 证券类型
                stockCode: '',
                reminderName: '', // 消息类型
                endDate: XEUtils.toDateString(new Date(), 'yyyyMMdd'), // 公告日期 默认当天,
                startDate: XEUtils.toDateString(new Date(), 'yyyyMMdd'), // 公告日期 默认当天,
                publishDates: [XEUtils.toDateString(new Date(), 'yyyyMMdd'), XEUtils.toDateString(new Date(), 'yyyyMMdd')],
                paging: {
                    pageSize: 50,
                    currentPage: 1,
                    total: 0,
                },
                sort: '',
            };
            this.getBondCodeList('');
            this.getReminderNames();
        }
    }

    // private handleSortChange(val): void {
    //     this.searchParam.sort = this.findName(val.property, val.order);
    //     this.getCompanyList();
    // }
    private handleSortChange(val): void {
        this.searchParam.sort = this.findName(val.prop, val.order);
        this.getCompanyList();
    }

    // 获取排序字段名称
    private findName(name: string, order: string): string {
        let value = '';
        if (!order) {
            return value;
        }
        const enum1 = {
            ascending: 'asc',
            descending: 'desc',
        };

        switch (name) {
            case 'stockCode':
                value = 'C_STOCK_CODE' + ' ' + enum1[order];
                break;
            case 'stockName':
                value = 'C_STOCK_NAME' + ' ' + enum1[order];
                break;
            case 'reminderName':
                value = 'C_REMINDER_NAME' + ' ' + enum1[order];
                break;
            case 'reminderMemo':
                value = 'C_REMINDER_MEMO' + ' ' + enum1[order];
                break;
            case 'reminderDate':
                value = 'N_REMINDER_DATE' + ' ' + enum1[order];
                break;
            case 'publishDate':
                value = 'N_PUBLISH_DATE' + ' ' + enum1[order];
                break;
        }
        return value;
    }

    setFormat(row, column) {
        return thousandsFormat(row[column['property']]);
    }
    getValueIs(row, column) {
        if (row[column['property']] == null || row[column['property']] == ' ') {
            return '--';
        } else {
            return row[column['property']];
        }
    }
}
</script>
<style lang="scss" scoped>
#corporate-behavior {
    padding: 10px 20px 0 20px;
    min-width: 1250px;
}

/deep/ .vxe-table {
    .vxe-sort--asc-btn.sort--active,
    .vxe-sort--desc-btn.sort--active {
        color: #409eff !important;
    }
}

/deep/ .el-range-editor.is-active {
    border-color: #409eff !important;
}

/deep/ .el-input__inner {
    height: 28px;
    line-height: 28px;
}
/deep/.el-input__icon {
    line-height: 20px !important;
}
// 滚动条的宽度
/deep/.el-table__body-wrapper::-webkit-scrollbar {
    width: 7px; // 横向滚动条
    height: 7px; // 纵向滚动条 必写
}
// 滚动条的滑块
/deep/.el-table__body-wrapper::-webkit-scrollbar-thumb {
    background-color: #c9c9c9;
    border-radius: 3.5px;
}
#header-content {
    width: 100%;
    border: 1px solid #d7d7d7;
    height: 48px;
    line-height: 48px;
    // border: 1px solid red;
    overflow: hidden;
    .el-form {
        padding: 0 10px;
        width: 100%;
        // border: 1px solid blue;
        .el-col {
            // border: 1px solid green;
            display: flex;
            align-items: center;
            .el-form-item {
                margin-top: 4px;
                /deep/.el-form-item__label {
                    color: black;
                }
                /deep/ .el-select {
                    .el-select__caret:first-child::before {
                        content: '\e6e1';
                    }
                    .is-focus {
                        .el-select__caret:first-child {
                            transform: rotateZ(0deg);
                        }
                    }
                }
            }
        }
    }
    .btn {
        position: absolute;
        top: 0;
        right: 100px;
        .el-button:nth-child(2) {
            background: white;
            color: black;
        }
    }
}
#main-content {
    margin-top: 10px;
    // overflow: auto;
    .content-table {
        width: 100%;
        height: calc(100vh - 150px);
        overflow: auto;
        margin: 0 auto;
        .el-table {
            border: 1px solid #d7d7d7;
        }
    }
}

// /deep/ .el-range-editor.el-input__inner {
//     padding: 3px 5px;
// }

/deep/ .el-date-editor .el-range-separator {
    // padding: 0 15px;
    width: 30px;
}

// /deep/ .el-input--suffix .el-input__inner {
//     height: 28px !important;
// }

// /deep/ .el-select__tags {
//     height: 28px !important;
// }

// /deep/ .el-select__tags span.el-tag:first-child .el-select__tags-text {
//     width: calc(100% - 18px);
//     overflow: hidden;
//     text-overflow: ellipsis;
//     white-space: nowrap;
//     display: inline-block;
// }

// /deep/ .el-select__tags span.el-tag:first-child {
//     width: 45%;

//     .el-tag__close {
//         top: -3px;
//     }
// }

// /deep/ .el-select__tags span.el-tag:nth-child(2) {
//     padding: 0 5px;
// }
</style>
